<div class="frame">
	<div class="game-container" #gameContainer></div>
	<div class="touch-pad left" [ngStyle]="{ display: hasTouchEvent? 'block' : 'none' }">
		<table>
			<tr>
				<td></td>
				<td>
					<div class="button">
						<ion-icon name="caret-up-outline"></ion-icon>
						<div class="cover" button="move-front" #touchButtons></div>
					</div>
				</td>
				<td></td>
			</tr>
			<tr>
				<td>
					<div class="button">
						<ion-icon name="caret-back-outline"></ion-icon>
						<div class="cover" button="move-left" #touchButtons></div>
					</div>
				</td>
				<td></td>
				<td>
					<div class="button">
						<ion-icon name="caret-forward-outline"></ion-icon>
						<div class="cover" button="move-right" #touchButtons></div>
					</div>
				</td>
			</tr>
			<tr>
				<td></td>
				<td>
					<div class="button">
						<ion-icon name="caret-down-outline"></ion-icon>
						<div class="cover" button="move-back" #touchButtons></div>
					</div>
				</td>
				<td></td>
			</tr>
		</table>
	</div>
	<div class="touch-pad right" [ngStyle]="{ display: hasTouchEvent? 'block' : 'none' }">
		<table>
			<tr>
				<td>
					<div class="button">
						<ion-icon name="arrow-up-outline"></ion-icon>
						<div class="cover" button="move-up" #touchButtons></div>
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button">
					</div>
				</td>
			</tr>
			<tr>
				<td>
					<div class="button">
						<ion-icon name="arrow-down-outline"></ion-icon>
						<div class="cover" button="move-down" #touchButtons></div>
					</div>
				</td>
			</tr>
		</table>
	</div>
</div>
